<template>
  <div class="comment-box">
    <!-- 评论 盒子 -->
    <div class="cm-title">
      <h3>评论</h3>
      <span class="sub">
        共<span>{{ totalComment }}</span
        >条评论</span
      >
    </div>
    <div class="comment-main">
      <!-- 评论表单 -->
      <div class="iptarea">
        <!-- 头像 -->
        <div class="avatar">
          <img
            src="http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50"
            alt=""
          />
        </div>
        <!-- 文本域 -->
        <div class="commtipt">
          <div class="ipt"><textarea name="" id="" cols="30" rows="10"></textarea></div>
          <div class="btn">
            <i class="u-icn icn-1"></i><i class="u-icn icn-2"></i>
            <a href="javascript:;" class="u-btn cmt-btn" @click="$Message({ msg: '功能未开发' })"
              >评论</a
            >
            <span>138</span>
          </div>
        </div>
      </div>
      <!-- 评论列表 -->
      <div class="comment-list" v-if="totalComment">
        <!-- 精彩评论 -->
        <CommentList
          v-if="currentPage === 1 && !hideHot && hotComment"
          :comment="hotComment"
          title="精彩评论"
        ></CommentList>
        <br />
        <br />
        <!-- 最新评论 -->
        <CommentList
          :comment="newComment"
          title="最新评论"
          :totalComment="totalComment"
        ></CommentList>
      </div>
      <!-- 分页 -->
      <PageNav
        :pageSize="pageSize"
        :currentPage="currentPage"
        :total="totalComment"
        @currentChange="pageChangeHandle"
        v-if="totalComment && Math.ceil(totalComment / pageSize) > 1"
      ></PageNav>
    </div>
  </div>
</template>

<script>
import PageNav from '@/components/PageNav/PageNav.vue'
import CommentList from './CommentList.vue'
export default {
  // type获取的评论类型 id获取评论主体的id
  props: ['id', 'type', 'hideHot'],
  components: { PageNav, CommentList },
  data() {
    return {
      // 热门评论
      hotComment: null,
      // 按时间排序评论
      newComment: null,
      // 时间参数
      cursor: '',
      // 总评论数
      totalComment: 0,
      // 每页数据量
      pageSize: 20,
      // 当前页
      currentPage: 1
    }
  },
  methods: {
    // /comment/new?type=2&id=19723756&sortType=3&cursor=&pageNo=1
    // 获取评论按时间排序
    async getNewComment() {
      const { data: res } = await this.$http.get(
        `/comment/new?type=${this.type}&id=${this.id}&pageNo=${this.currentPage}&cursor=${this.cursor}&sortType=3`
      )
      this.newComment = res.data.comments
      this.totalComment = res.data.totalCount
      this.cursor = res.data.cursor
    },
    // 获取评论按热度排序
    async getHotComment() {
      const { data: res } = await this.$http.get(
        `/comment/new?type=${this.type}&id=${this.id}&sortType=2`
      )
      this.hotComment = res.data.comments
    },
    // 页码改变处理事件，重新获取数据
    pageChangeHandle(num) {
      this.currentPage = num
      this.getNewComment()
    }
  },
  watch: {
    listId(val) {
      this.getNewComment()
      this.getHotComment()
    },
    // 监听路由变化，重新获取数据
    $route(to, from) {
      // 判断是否进行了参数的变化，重置当前页为1
      for (var key in to.query) {
        if (to.query[key] !== from.query[key]) {
          this.currentPage = 1
        }
      }
      this.getNewComment()
      this.getHotComment()
    }
  },
  created() {
    this.getNewComment()
    this.getHotComment()
  }
}
</script>

<style lang="less" scoped>
@import './Comment.less';
</style>
